<template>
  <div class="home">
    <IndexSearch></IndexSearch>
    <FixedPad height="50px"></FixedPad>
    <van-swipe class="swiper" :autoplay="4000" indicator-color="#1baeae">
      <van-swipe-item v-for="c in carousels" :key="c.carouselId">
        <img v-lazy="c.carouselUrl" class="swipe-image" />
      </van-swipe-item>
    </van-swipe>
    <IconList />
    <IndexGoodsList title="新品上线" :goodsList="newGoods" />
    <IndexGoodsList title="热门商品" :goodsList="hotGoods" />
    <IndexGoodsList title="最新推荐" :goodsList="recommendGoods" />
    <FixedPad height="60px"></FixedPad>
  </div>
</template>

<script>
import IndexSearch from '@/views/Home/IndexSearch'
import IconList from '@/views/Home/IconList'
import IndexGoodsList from '@/views/Home/IndexGoodsList'
import FixedPad from '@/components/FixedPad'
import { getHomePageData } from '@/api/home'
export default {
  name: 'Home',
  components: {
    IndexSearch,
    IconList,
    IndexGoodsList,
    FixedPad
  },
  data() {
    return {
      carousels: [], // 轮播图
      hotGoods: [], // 热门商品
      newGoods: [], // 新商品
      recommendGoods: [] // 推荐商品
    }
  },
  mounted() {
    this.getHomePageApi()
  },
  methods: {
    // 获取首页数据
    async getHomePageApi() {
      const res = await getHomePageData().catch(err => {
        console.log(err)
        this.$toast.fail('请求失败')
      })
      if (res.resultCode === 200) {
        const { carousels, hotGoods, newGoods, recommendGoods } = res.data
        this.carousels = carousels
        this.hotGoods = hotGoods.slice(0, 4)
        this.newGoods = newGoods.slice(0, 6)
        this.recommendGoods = recommendGoods
      }
      console.log(res.data)
    },

    // 获取组件里的 scroll 实例
    getScrollInstance(instance) {
      console.log('instance:', instance)
      setTimeout(() => {
        instance.refresh()
      }, 5000)
    },

    scrollCb(position) {
      console.log(position)
    },
    scrollStart() {
      console.log('scroll start')
    },
    scrollEndCb() {
      console.log('scrollEnd')
    },
    pullingUpCb() {
      console.log('pulling up')
    },
    pullingDownCb() {
      console.log('pulling down')
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  font-size: 0.32rem;
  .swipe-image {
    width: 100%;
  }
  /deep/ .swiper .van-swipe-item {
    height: 170px;
  }
}
</style>
